<template>
	<div class="pb30">
		<div class="flex col-center row-between plr30 border-bottom pb10">
			<span class="fb mr20">跟进记录</span>
			<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
				<el-form-item label="关键词" prop="keyWords" style="margin-bottom: 0;">
					<el-input
					v-model="queryParams.keywords"
					placeholder="不限"
					clearable
					class="resetInput"
					style="width: 200px"
					:suffix-icon="Search"
					@keyup.enter="handleQuery"
					/>
				</el-form-item>
				<el-form-item label="时间范围" prop="time" style="margin-bottom: 0;">
					 <el-date-picker
						@change="changeTime"
						v-model="time"
						value-format="YYYY-MM-DD"
						type="daterange"
						range-separator="至"
						start-placeholder="请选择开始时间"
						end-placeholder="请选择结束时间"
						size="large"
					  />
				</el-form-item>
				<el-button class="mt5 mr5" type="defaultBtn" @click="handleQuery">搜索</el-button>
				<el-button class="mt5" @click="resetQuery">重置</el-button>
				<!-- <el-button class="mt5" @click="exports">导出</el-button> -->
				<!-- <el-select class="mt5 ml10" v-model="value" placeholder="请选择导出方式" @change="handleExport" style="width: 200px;">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select> -->
				<el-dropdown  class="mt5 ml15" split-button type="defaultBtn" @command="handleExport">
				  导出
				  <template #dropdown>
					<el-dropdown-menu>
					  <el-dropdown-item command="0">分页导出</el-dropdown-item>
					  <el-dropdown-item command="1">全部导出</el-dropdown-item>
					</el-dropdown-menu>
				  </template>
				</el-dropdown> 
				 
			</el-form>		
		</div>
		<div class="mt20">
			<el-timeline style="max-width: 600px" v-if="list.length > 0">
				<el-timeline-item :timestamp="item.followupTime"  placement="top"
				v-for="(item,index3) in list" :key="index3"
				>
					 <template #dot>
						<img class="bgWhite ml4" style="width: 9px;" src="@/assets/images/circle.png" alt="">
					</template>
				  <el-card shadow="never" body-class="card">
				   <div class="flex col-center row-between">
						<span class="fb"> {{item.staffName}} {{item.customerStatusName}}（{{item.followupName}}）</span>
						<span class="color2 fs12">{{item.followupTime}}</span>
				   </div>
				   <p class="color2 fs12" v-if="item.dynamicData != ''">
					   <span v-for="(items,k) in JSON.parse(item.dynamicData)" :key="k">
						   {{items.content}};
					   </span>
				   </p>
				   <div class="flex col-end row-between">
					   <span class="fs12">来自客户：{{item.customerName}}</span>
					   <div class="flex col-end">
						   <el-button style="width: 60px;height: 30px;color: #677585;"
						   @click="detailDialog(item.id)"
						   >详情</el-button>
						   <el-button style="width: 60px;height: 30px;color: #677585;"
						   @click="commentFunc(item)"
						   >评论</el-button>
					   </div> 
				   </div>
				   <div class="bgWhite radius8 p20 mb15 mt15" v-for="(mes,i) in item.commentList">
					   <div class="flex col-center row-between">
							<span class="fb">{{mes.createName}}</span>
							<span class="color2 fs12">{{mes.createTime}}</span>
					   </div>
					   <div class="color2 mt10">
						   {{mes.commentContent}}
					   </div>
				   </div>
				  </el-card>
				</el-timeline-item>
			  </el-timeline>
			  <el-empty v-else description="暂无数据" />
		</div>
		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" 
		@pagination="recordList"/>
		<!-- 详情 -->
		<detailDialog ref="dialog" :message="message" @edit="edit"></detailDialog>
		<!-- 评论 -->
		<commentDialog ref="comment" :message="message"></commentDialog>
		<!-- 添加跟进 -->
		<addDialog ref="dialog2" :customerId="customerTypeProps.userId" @recordList="resetRecordList"></addDialog>
	</div>
</template>

	
<script>
	import {resetForm} from '@/utils/ruoyi'
	import { ArrowDown } from '@element-plus/icons-vue'
	// 跟进记录
	import { recordList} from '@/api/business/customer' 
	import {exportRecord,followupDetail} from '@/api/business/followup' 
	import { tansParams, blobValidate } from '@/utils/ruoyi'
	import { saveAs } from 'file-saver'
	import detailDialog from '../../../components/detail.vue'//详情
	import commentDialog from '../../../components/comment.vue'//添加评论
	import addDialog from '../../../components/checkIn.vue'//添加跟进
	export default{
		components:{
			detailDialog,
			commentDialog,
			addDialog
		},
		props:{
			customerTypeProps:{
				type:Object,
				default:{}
			},
			activeName:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				value:'',
				options: [
					{
						value: '0',
						label: '分页导出'
					}, {
						value: '1',
						label: '全部导出'
					}
				],	
				total:10,
				time:'',
				queryParams:{
					pageNum:1,
					pageSize:10,
					customerId:'',//客户id
					startTime:'',//开始时间
					endTime:'',//结束时间					
					keywords:'',//关键词
					customerId:this.customerTypeProps.userId,
					exportType:''
				},
				list:[],
				message:'',
				bus_followup_type:this.useDict("bus_followup_type").bus_followup_type,
				bus_customer_status:this.useDict("bus_customer_status").bus_customer_status,//客户状态
				bus_followup_field_management:this.useDict('bus_followup_field_management').bus_followup_field_management,
				otherRecordId:''
			}
		},
		watch:{
			activeName(){
				let that = this
				if(this.activeName == 'message3'){
					this.recordList()
				}
			}
		},
		methods:{
			// 详情
			detailDialog(id){
				this.otherRecordId = id
				this.followupDetail()
			},
			followupDetail(){
				followupDetail(this.otherRecordId).then(res=>{
					this.message = res.data
					for(let i in this.bus_followup_type){
						if(this.message.followupType == this.bus_followup_type[i].value){
							this.message.followupTypeName = this.bus_followup_type[i].label
						}
					}
					for(let i in this.bus_customer_status){
						if(this.message.customerStatus == this.bus_customer_status[i].value){
							this.message.customerStatusName = this.bus_customer_status[i].label
						}
					}
					
					this.$refs.dialog.open()
				})
			},
			edit(e){
				this.$refs.dialog2.open(e)
			},
			resetRecordList(){
				setTimeout(()=>{
					this.recordList()
					this.followupDetail(this.otherRecordId)
				},200)
			},
			//评论
			commentFunc(item){
				let dynamicData = JSON.parse(item.dynamicData)
				for(let key in this.bus_followup_field_management){
					for(let i in dynamicData){
						if(dynamicData[i].code == this.bus_followup_field_management[key].value){
							dynamicData[i].label = this.bus_followup_field_management[key].label
						}
					}
				}
				this.message = item
				this.message.resetDynamicData = dynamicData
				this.$refs.comment.open()
			},
			recordList(){
				recordList(this.queryParams).then(res=>{
					this.list = res.rows
					this.total = res.total
					console.log(this.customerTypeProps.bus_customer_status,'this.customerTypeProps.bus_customer_status')
					for(let key in this.list){
						for(let i in this.customerTypeProps.bus_followup_type){
							if(this.list[key].followupType == this.customerTypeProps.bus_followup_type[i].value){
								this.list[key].followupName = this.customerTypeProps.bus_followup_type[i].label
							}
						}
						for(let i in this.bus_customer_status){
							if(this.list[key].customerStatus == this.bus_customer_status[i].value){
								this.list[key].customerStatusName = this.bus_customer_status[i].label
							}
						}
					}
				})
			},
			// 搜索按钮操作
			handleQuery() {
			  this.queryParams.pageNum = 1;
			  this.recordList()
			},
			// 重置按钮操作
			resetQuery() {
			  this.queryParams.keywords = ''
			  this.queryParams.startTime = ''
			  this.queryParams.endTime = ''
			  this.handleQuery();
			},
			//时间
			changeTime(e){
				this.queryParams.startTime = e[0]
				this.queryParams.endTime = e[1]
				this.recordList()
			},
			//导出
			handleExport(e){
				let that = this
				this.queryParams.exportType = e
				this.download(
				  "/followup_record/exportRecord",
				  {
				    ...this.queryParams,
				  },
				  `exportRecord_${new Date().getTime()}.xlsx`
				);
			}
		}
	}
</script>

<style>
</style>